<html>
<title>Facebook Timeline Design with jquery and CSS</title>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/app.css" />
<script src="resources/js/stomp.js"></script>
<script src="resources/js/sockjs-0.3.4.js"></script>
<script src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/jquery.masonry.min.js"></script>
<!-- script src="resources/js/masonry.pkgd.js" /-->

<style>
body { background-color: #E7EBF2; font-family:arial; font-size:13px }
#container {width:860px; margin: 0 auto;} 
#containertop	{	width:860px; margin: 0 auto; margin-top: 50px	}

.borderclass { border:1px solid #A9B6D2; }
.item {
  width: 408px;
  margin: 10px;
  float: left;
  margin-top:10px;
  background-color:#ffffff;
  border:solid 1px #B4BBCD;
	min-height:50px;
	text-align:justify;
	word-wrap:break-word; 
}

.item_user {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #00F;
	border-bottom: solid 1px #E7EBF2;
	padding-left:10px;	
}
.item_status {
  width: 370px;
  margin: 10px;
  font-size: 15px;
  float: left;
  margin-top:0px;
  background-color:#ffffff;
  //border:solid 1px #B4BBCD;
min-height:10px;
text-align:justify;
word-wrap:break-word; 
}


.topbox
{
margin: 10px;


margin-top: 10px;
background-color: white;
border: solid 1px #B4BBCD;

}


.item div, .topbox div
{
padding:8px;	
}
.rightCorner { 
    background-image: url("images/right.png");
    display: block;
    height: 15px;
    margin-left: 408px;
    margin-top: 8px;
    padding: 0;
    vertical-align: top;
    width: 13px;
z-index:2;

	position: absolute;
}
.leftCorner{
background-image: url("images/left.png");
display: block;
height: 15px;
width: 13px;
margin-left: -13px;
margin-top: 8px;
position: absolute;
z-index:2;
}
#popup{ display: block; 
 width: 408px;
  float: left;
  margin-top:10px;
  background-color:#ffffff;
  border:solid 1px #A9B6D2;
  min-height:60px;
  display:none;
  position:absolute;
  margin:10px;
 }
.Popup_rightCorner
{
background-image: url("images/right.png");
    display: block;
    height: 15px;
    margin-left: 408px;
    margin-top: 8px;
    padding: 0;
    vertical-align: top;
    width: 13px;
z-index:2;

	position: absolute;
}
 #box
{
padding:8px;	

}
#update
{
width:100%;
}

 .timeline_container{
                width: 16px;
                text-align: center;
                margin: 0 auto;
				cursor:pointer;
				    display: block;
            }
            .timeline{
                                
                margin: 0 auto;
				 background-color:#e08989;
    display: block;
    float: left;
    height: 100%;
    left: 428px;
    margin-top: 10px;
    position: absolute;
    width: 4px;
            }
            .timeline:hover{
                cursor: pointer;
				margin: 0 auto;
            }
            .timeline div.plus{
                width: 14px;
                height: 14px;
               
                position: relative;
                left: -6px;
            }
			#update_button {
background-color: #cc0000;
color: white;
font-weight: bold;
padding: 5px;
border: solid 1px #333;
margin-top: 5px;
cursor: pointer;
}
.shade{box-shadow:0px 0px 18px #000;-moz-box-shadow:0px 0px 18px #000;-webkit-box-shadow:0px 0px 18px #000}
h1{ font-family: 'Georgia',Times New Roman; }
.timeline:hover
{
cursor: none;
}
.deletebox
{
font-weight:bold;
float:right;
text-decoration:none;
margin:8px 10px 8px 10px;
color:#cc0000
}

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
	.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */
	
.nav { height: 42px;}
	.nav ul { list-style: none; }
	.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
	.nav ul li:first-child{ padding-left: 0;}
	.nav ul li a { }
	.nav ul li a:hover{ text-decoration: underline;}
	
time,.time{
    font-size: 10px; color:gray; border-top: 1px solid #E7EBF2; min-width:350px; height:15px; 
}

textarea {
    resize: none;
}

</style>
</head>
<body>

 <div id="containertop" >
 <!--div id='profile' style='margin:10px;height:100px'>
 <img src='http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe&s=100' style='border:solid 2px #cc0000;float:left;' alt='Srinivas Tamada'/>
 <h1 style='margin-left:120px'>Facebook Timeline Design using Jquery</h1>
<h2 style='margin-left:120px'>Srinivas Tamada </h2>
 <h4 style='margin-left:120px'>Tutorial Link <a href='http://9lessons.info'>Click Here</a> - Follow me <a href='http://9lessons.info'>@9lessons</a> - Add Me <a href='http://fb.com/srinivas.tamada'>fb.com/srinivas.tamada</a> </h4>

 </div-->
 <div id="head-wrapper">
    	<div id="head-bar">
    		<div class="head-menu"><p class="head-font"><a href="Index.html" target="_blank">New</a></div>
            <div class="head-menu"><p class="head-font">Status</p></div>
            <div class="head-menu"><p class="head-font"><a href="Hinh.html" target="_blank">Pictures</a></p></div>
            <div class="head-menu"><p class="head-font"><a href="Video.html" target="_blank">Videos</a></p></div>
            
   	 	</div>
    </div>
    
 <b>What's Up?</b><br/>
<textarea id='update' placeholder="What's on your mind?"></textarea>
<input type='submit' value=' Post ' id='update_button'/>
 
</div>

  <div id="container">
    
       <div class="timeline_container">
            <div class="timeline">
                <div class="plus"></div>
            </div>
        </div>
	 	
        <div class="item ">
 <a href='#' class='deletebox'>X</a>
 <div class="item_user">người dùng</div>
	  		<div>test
			</div>
            <div style="padding-top:0px; text-align:right">
            	<a href="ChiTiet.html" target="_blank">read more</a>
            </div>
            
            <div class="time"> <div style="padding-top:2px; float:left"> about five minutes left</div>
            	<div style="padding-top:0px; float:right" class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> 
            </div>
	  </div>
        
	  <div class="item ">
 <a href='#' class='deletebox'>X</a>
 <div class="item_user">người dùng</div>
	  		<div>Lấy vợ hay lấy xe hơi?
Tạp chí xe hơi “Automagazin” bản tiếng Đức đăng một câu chuyện được thêu dệt về ông vua xe hơi Henry Ford như sau: “Do khá bận rộn với việc chế tạo xe hơi nên năm 25 tuổi ông quyết định tới trung tâm môi giới hôn nhân để tìm vợ. Henry Ford đã đăng quảng cáo như sau: Cần một người vợ đạt các tiêu chí: Tốt, đẹp, cho chạy thử, có chế độ bảo hành, miễn phí bảo trì một năm...”.
Và cuối cùng ông đã lấy được một người vợ tên là Clara Bryant mà theo nhận xét của Henry Ford thì: Đó là một người vợ tốt như “xe hơi” của Ford tuy nhiên “chiếc xe” đó có bộ đèn pha hơi bé và thường bị “chảy dầu” định kỳ hằng tháng.
			</div>
            <div style="padding-top:0px; text-align:right">
            	<a href="ChiTiet.html" target="_blank">read more</a>
            </div>
            
            <div class="time"> <div style="padding-top:2px; float:left"> about five minutes left</div>
            	<div style="padding-top:0px; float:right" class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> 
            </div>
	  </div>
      
	  
	  <div class="item">
			<a href='#' class='deletebox'>X</a>
			<div class="time">about an hour left</div>
			<div class="item_status">
			    comment hinh
			</div>
	  		<div>
	  			<!-- img src="images/hinh_3.jpg" alt="Smiley face" height="auto" width="390"-->	
	  		</div>		
	  </div>
	  
	   <div class="item">
			<a href='#' class='deletebox'>X</a>
			<div class="time">about five minutes left</div>
			<div class="item_status">
			    Dàn siêu xe Việt Nam chuẩn bị hành trình Campuchia
				<a href="http://vnexpress.net/tin-tuc/oto-xe-may/dan-sieu-xe-viet-nam-chuan-bi-hanh-trinh-campuchia-3107962.html" target="_blank">read more</a>
			</div>
	  		<div>
	  			<!-- img src="images/hinh_2.jpg" alt="Smiley face" height="365" width="390"-->	
	  		</div>		
	  </div>
	  
	 <div id="popup" class='shade'>
	 		
		<div class="Popup_rightCorner" >	</div>
		<div id='box'>
		<b>What's Up?</b><br/>
		<textarea id='update'></textarea>
		<input type='submit' value=' Update ' id='update_button'/>
         </div>
	
	</div>
	</div>

<script>
$(function(){


function Arrow_Points()
{ 
var s = $('#container').find('.item');
$.each(s,function(i,obj){
var posLeft = $(obj).css("left");
$(obj).addClass('borderclass');
if(posLeft == "0px")
{
html = "<span class='rightCorner'></span>";
$(obj).prepend(html);			
}
else
{
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
}
});
}

$('.timeline_container').mousemove(function(e)
{
var topdiv=$("#containertop").height();
var pag= e.pageY - topdiv-26;
$('.plus').css({"top":pag +"px", "background":"url('images/plus.png')","margin-left":"1px"});}).
mouseout(function()
{
$('.plus').css({"background":"url('')"});
});
	
	
				
$("#update_button").live('click',function()
{
var x=$("#update").val();
$("#container").prepend('<div class="item"><a href="#" class="deletebox">X</a><div>'+x+'</div></div>');

//Reload masonry
$('#container').masonry( 'reload' );

$('.rightCorner').hide();
$('.leftCorner').hide();
Arrow_Points();

$("#update").val('');
$("#popup").hide();
return false;
});

// Divs
$('#container').masonry({itemSelector : '.item',});
Arrow_Points();
  
//Mouseup textarea false
$("#popup").mouseup(function() 
{
return false
});
  
$(".timeline_container").click(function(e)
{
var topdiv=$("#containertop").height();
$("#popup").css({'top':(e.pageY-topdiv-33)+'px'});
$("#popup").fadeIn();
$("#update").focus();

	
});  


$(".deletebox").live('click',function()
{
if(confirm("Are your sure?"))
{
$(this).parent().fadeOut('slow');  
//Remove item
$('#container').masonry( 'remove', $(this).parent() );
//Reload masonry
$('#container').masonry( 'reload' );
$('.rightCorner').hide();
$('.leftCorner').hide();
Arrow_Points();
}
return false;
});



//Textarea without editing.
$(document).mouseup(function()
{
$('#popup').hide();

});
 
  
});

jQuery("document").ready(function($){
	
	var nav = $('.nav-container');
	//var nav = $('.navigation');
	
	$(window).scroll(function () {
		if ($(this).scrollTop() > 10) {			
			nav.addClass("f-nav");
		} else {
			nav.removeClass("f-nav");
		}
	});

});
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>